<%--
  Created by IntelliJ IDEA.
  User: LT
  Date: 2018-11-23
  Time: 9:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <jsp:include page="${pageContext.request.contextPath}/common/common.jsp" />

    <script>
        $(function () {
            $("#tb").bootstrapTable({
                url:'/house/query',
                height:500,
                search:true,
                pagination:true,
                //绑定工具栏
                toolbar :'#tool',
                columns:[
                    {
                        field:'houseid',
                        title:'编号'
                    },
                    {
                        field:'createdate',
                        title:'创建时间'
                    },
                    {
                        field:'houseaddress',
                        title:'地址'
                    },{
                        field:'housetype',
                        title:'类型'
                    }

                ]
            }) ;
        }) ;
    </script>
</head>
<body>

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">房屋信息</h3>
    </div>
    <div class="panel-body">
        <table id="tb"></table>
    </div>
</div>


<div id="tool">
    <div class="text-center">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
            <span class="glyphicon-plus">&nbsp;&nbsp;增加房屋信息</span>
        </button>
    </div>
</div>

<!--增加窗口-->
<div class="modal inmodal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content animated bounceInRight">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
                </button>
                <i class="fa fa-laptop modal-icon"></i>
                <h4 class="modal-title">窗口标题</h4>
                <small class="font-bold">这里可以显示副标题。
            </div>
            <div class="modal-body">
                <p><strong>H+</strong> 是一个完全响应式，基于Bootstrap3.3.6最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术，她提供了诸多的强大的可以重新组合的UI组件，并集成了最新的jQuery版本(v2.1.1)，当然，也集成了很多功能强大，用途广泛的jQuery插件，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。</p>
                <div class="form-group"><label>Email</label> <input type="email" placeholder="请输入您的Email" class="form-control"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

</div>
</div>


</body>
</html>
